<template>
	<div class="carTool">
		<div class="navTool">
        <div class="items tabFirst" v-for="(item, index) in tabList" :key="index" v-if="index == 0"
          :class="{ actived: currentIndex == item.value }" @click="changeTab(item)">
          {{ item.title }}
        </div>
        <div class="items tabCom" v-else-if="index > 0 && index < (tabList.length-1)"
          :class="{ actived: currentIndex == item.value }" @click="changeTab(item)">
          {{ item.title }}
        </div>
        <div class="items tabLast" v-else="index == (tabList.length-1)"
          :class="{ actived: currentIndex == item.value }" @click="changeTab(item)">
          {{ item.title }}
        </div>
		</div>

	</div>
</template>
<script>
	export default {
		props: ["tabList", "currentIndex", "taskCur"],
		data() {
			return {};
		},
		methods: {
			changeTab(item) {
				this.$parent.fatherChange(item);
			},
		},
	};
</script>
<style lang="less" scoped>
	.carTool {
		width: 100%;
		height: 52px;
    position: absolute;
    background: #f7f7f7;
    z-index: 9;
    padding-top:10px;
		.navTool {
			width: 100%;
			height: 100%;
			align-items: center;
      border-bottom: 1px solid #ddd;
			.items {
				moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
        display: inline-block;
				padding: 0 22px;
				height: 42px;
				line-height: 42px;
        border-left:1px solid transparent;
        border-top:1px solid transparent;
        border-right:1px solid transparent;
				// background: url("../assets/image/wxz0.png") no-repeat;
				// background-size: 100% 100%;
				cursor: pointer;
				text-align: center;
				font-size: 15px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.actived {
				font-size: 15px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #007bff;
				z-index: 999;
        background-color: #fff!important;
        border-top-color:#ddd;
        border-left-color:#ddd;
        border-right-color:#ddd;
			}
		}
	}
</style>
